<template>
<div>
    <template v-for="item in data">
      <div class="new"  :key="item.id">
          <h4>{{item.coverTitle}}</h4>
          <!-- <h3> { coverTitle } </h3> -->
          <div class="content" :key="item.id" >
            <img :src="item.recipe.image" />
            <!-- <img v-lazy="src" /> -->
            <div class="word" :key="item.id">
              <h5>{{item.recipe.title}}</h5>
            <p>作者:{{item.clientName}}</p>
            </div>
          </div>
          <div class="tail">
            <span>暂无回答</span>
            <a href=""><span class="iconfont icon-input" id="aaa">写答案</span></a>
            
          </div>
      </div>
    </template>
</div>
</template>

<script>
import axios from "axios";
// axios.defaults.baseURL = "https://api.hongbeibang.com/question/getHot?";
import '@/assets/iconfont/iconfont.css';



          


export default {
 data(){
        return{
         data:[]
        }
        
    },
    mounted(){
      // let url = "https://api.hongbeibang.com/question/getHot?_t=1607152689639&pageIndex=0&pageSize=10&all=true&timestamp=1607152689638"
      let url = "https://api.hongbeibang.com/question/getNew?_t=1607243258228&pageIndex=0&pageSize=10&all=true&timestamp=1607243258226"
        axios.get(url).then((res)=>{
          let data = res.data.data.content.data
          this.data = data
          console.log(data)
      })
    },
    // methods:{
    //   xiangqing(){
    //     this.$router.push('/xiangqing')
    //   }
    // }
}
</script>
<style lang="scss" scoped>
.new{
  width: 100%;
  // height: 100;
  border-bottom: 1px solid #E7E2E5;
  margin-top: 10px;
    position:relative;
  top: 100px;
  h4{
    padding-left: 1px;
  }
  .content{
    width: 100%;
    height: 70px;
    background-color: #F5F7F9;
     border-radius: 4px;
    margin: auto;
    img{
      width: 70px;
      height: 70px;
      float: left;
    }
    .word{
      float: left;
      margin-left: 20px;
      margin-top: 15px;
      p{
        font-size: 12px;
        color: rgb(218, 25, 25);
      }
    }
  }
  .tail{
    width: 100%;
    height: 30px;
    // margin-top: -3px;
    // background-color: paleturquoise;
    color: blue;
    line-height: 40px;
    #aaa{
      float: right;
      color: orange;
      a{
        color: orange;
      }
    }
  }
}
 
</style>